'use client';

import React from 'react';
import icon_arrow from './icon_arrow.svg';
import { Space, Flex } from 'antd';

interface TitleProps {
	title: string;
	subTitle?: string;
	unit?: string;
	titleFontSize?: number;
}

const Title: React.FC<TitleProps> = props => {
	const { title, subTitle, unit, titleFontSize } = props;

	return (
		<Flex
			align="center"
			justify="space-between"
			style={{
				width: '100%',
				fontSize: 16,
			}}
		>
			<Space>
				<img
					src={icon_arrow.src}
					alt="icon_arrow"
					style={{ width: 5, height: 10 }}
				/>
				<span
					style={{
						color: 'rgba(255,255,255,0.8)',
						fontSize: titleFontSize || 16,
						fontWeight: 500
					}}
				>
					{title}
				</span>
				<span
					style={{
						color: 'rgba(255,255,255,0.4)',
						fontSize: 14,
						fontWeight: 500
					}}
				>
					{subTitle}
				</span>
			</Space>
			<span
				style={{
					color: 'rgba(255,255,255,0.6)',
					fontSize: '14px',
					fontWeight: 600,
					marginRight: '6px'
				}}
			>
				{unit}
			</span>
		</Flex>
	);
};

export default Title;

